<template>
  <div id="sBalance-Statistic">
    <el-form :model="statisticForm" ref="statisticForm" class="statisticForm" :inline="true" size="small">
      <el-form-item label="">
        <el-select clearable v-model="statisticForm.type" placeholder="请选择结算类型">
          <el-option v-for="(item, index) in typeList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="到期时间" class="order-time">
        <el-row>
          <el-col :span="11" class="time-width">
            <el-date-picker
              v-model="statisticForm.startTime"
              type="datetime"
              placeholder="选择开始日期时间"
              default-time="00:00:00">
            </el-date-picker>
          </el-col>
          <el-col :span="1" class="time-span">~</el-col>
          <el-col :span="11" class="time-width">
            <el-date-picker
              v-model="statisticForm.endTime"
              type="datetime"
              placeholder="选择结束日期时间"
              default-time="23:59:59">
            </el-date-picker>
          </el-col>
        </el-row>
      </el-form-item>
      <el-button type="primary" size="small" @click="search(1)">搜索</el-button>
    </el-form>

    <el-table
      class="style-a"
      :data="tableData"
      size="small"
      border
      style="width:100%"
      v-loading.body="loading" element-loading-text="Loading">
      <el-table-column
        label="统计类型"
        align="center"
        prop="type"
        min-width="150">
      </el-table-column>
      <el-table-column
        label="景区未结算资金（元）"
        align="center"
        prop="unSettleAmount"
        min-width="150">
      </el-table-column>
      <el-table-column
        label="景区已结算资金（元）"
        prop="settleAmount"
        align="center"
        min-width="150">
      </el-table-column>
      <el-table-column
        label="已到期清分结算资金（元）"
        align="center"
        prop="serviceAmount"
        min-width="150">
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange1"
      :current-page="currentPage"
      :page-sizes="[20]"
      :page-size="20"
      layout="total, prev, pager, next, jumper"
      :total="totalSize">
    </el-pagination>
  </div>
</template>
<script>
  import { getBalanceStatistics } from '@/api/sBalanceStatistics'
  export default {
    data() {
      return {
        statisticForm: {
          scenicName: null,
          userName: null,
          startTime: null,
          endTime: null,
          type: null
        },
        typeList: [
          { id: 0, name: '按天' },
          { id: 1, name: '按周' },
          { id: 2, name: '按月' },
          { id: 3, name: '按季' },
          { id: 4, name: '按年' }
        ],
        currentPage: 1,
        totalSize: null,
        tableData: [],
        loading: false
      }
    },
    created() {
      this.initTime()
      this.getBalanceList()
    },
    methods: {
      initTime() {
        let date = new Date()
        let startTime = date.getTime() - 3600 * 1000 * 24 * 7
        this.statisticForm.startTime = new Date(startTime)
        this.statisticForm.endTime = new Date()
      },
      search() {
        this.currentPage = 1
        this.getBalanceList()
      },
      handleCurrentChange1(val) {
        this.currentPage = val
        this.getBalanceList(val)
      },
      getBalanceList() {
        this.loading = true
        let params = {
          startTime: new Date(this.statisticForm.startTime).getTime() || null,
          endTime: new Date(this.statisticForm.endTime).getTime() || null,
          pageNumber: this.currentPage,
          pageSize: 20,
          type: this.statisticForm.type
        }
        getBalanceStatistics(params).then(res => {
          let data = res.data
          this.loading = false
          if (data.errorCode === 'E_000') {
            this.tableData = data.body.pageInfo.list
            this.totalSize = data.body.pageInfo.total
          }
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  #sBalance-Statistic{
    .p-content{
      text-align: left;
    }
  }
</style>
